<template>
<login>
  <div style="width:100%;height:100%;" class="img">
            <!-- <div>{{name}}</div> -->
        <!-- 左边方框和文字 -->
        <div class="left">
            <div class="bloke1"></div>
            <div class="bloke2"></div>
            <div class="text1">双线质量管控体</div>
            <div class="text2">力求每件产品、每个细节都尽善尽美</div>
            <div class="text3">够专业   才放心</div>
        </div>

        <div class="back">
            <div class="text4">欢迎使用</div>
            <div class="text5">系统登陆</div>
            <!-- <div class="zong1">
                <div class="textName">用户名</div>
                <div class="name">
                    <image src="./img1/name.png" class="imgName"></image>
                    <input class="inName"/>
                </div>
                
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm">
                  <div class="name">
                    <el-form-item label="用户名" prop="userName">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </div>
                </el-form>
            </div>
            <div class="zong2">
                <div class="passworld">密    码</div>
                <div class="inPass">
                    <image src="./img1/passworld.png" class="imgPut"></image>
                    <input class="inName"/>
                </div>
            </div> -->


            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
              <el-form-item label="用户名" prop="userName">
                <el-input placeholder="输入用户名" v-model="ruleForm.userName" class="inName">
                  <img slot="prefix" src="../assets/img1/name.png" class="imgName"/>
                </el-input>
              </el-form-item>

              <el-form-item label="密 码" prop="passWord">
                <el-input placeholder="输入密码" v-model="ruleForm.passWord" show-password class="inName">
                  <img slot="prefix" src="../assets/img1/passworld.png" class="imgPut"/>
                </el-input>
              </el-form-item>

            </el-form>
        

            <!-- 登录 -->
            <div class="loging" @click="submitForm">登陆</div>
            <!-- <wxbutton class="loging" type="0" :size="c"></wxbutton>
            <div @click="c=''">点击放大</div> -->
        </div>
  </div>
</login>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'
import md5 from 'js-md5'
// import axios from 'axios'

export default {
  name: 'App',
  components: {
    //HelloWorld
  },
  data(){
    return {
      ruleForm: {
          userName: '',
          passWord:''
        },
      rules:{
        userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
        passWord: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
      },
    }
  },
  methods:{
    submitForm() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.$http({
              url:'/login',
              method:'POST',
              data:{
                userName:this.ruleForm.userName,
                passWord:md5(this.ruleForm.passWord),
                platform:'web'
              }
            }).then(res => {
              if(!res.errorMsg){
                localStorage.setItem('token',res.token)
                localStorage.setItem('user',JSON.stringify(res))
                this.$router.push('/index')
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
  created(){

  },
  mounted(){

  }
}
</script>

<style scoped>
/* 引用样式 */
 @import '../assets/list.css';

html,body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/* .app1{
  background:url('/image/test.png');
  height: 300px;
} */
</style>
